<template>
    <Row>
        <Row>
            <Col span="8" pull="16">
                <Button-group style="float: right;">
                    <Tooltip content="刷新" placement="bottom-start" transfer>
                        <Button type="ghost" @click="refresh">
                            <Icon type="loop"></Icon>
                        </Button>
                    </Tooltip>
                    <Tooltip content="导出全部数据" placement="bottom-start" transfer>
                        <Button type="ghost" @click="exportData(1)">
                            <Icon type="arrow-down-a"></Icon>
                        </Button>
                    </Tooltip>
                    <Tooltip content="导出当前页数据" placement="bottom-start" transfer>
                        <Button type="ghost" @click="exportData(2)">
                            <Icon type="ios-download-outline"></Icon>
                        </Button>
                    </Tooltip>
                    </Button-group>
            </Col>
        </Row>
        <Row>
            <Table :loading="loading" :columns="columns" :data="dataAll"></Table>
        </Row>
    </Row>
</template>

<script>
import {
  V_ROOT
} from '@/api/config'
import {
  timeFormat
} from '@/common/filter'
export default {
  name: "stock",
  data() {
    return {
      columns: [
        {
            type: 'index',
            width: 60,
            align: 'center'
        },
        {
          title: "名称",
          key: "name",
          sortable: true
        },
        {
          title: "型号",
          key: "model",
          sortable: true
        },
        {
          title: "规格参数",
          key: "spec",
          sortable: false,
        },
        {
          title: "库存数量",
          key: "count",
          sortable: false,
        },
        {
          title: "最后变动时间",
          key: "utime",
          render: (h, params) => {
              return h("span", {}, timeFormat(params.row.utime))
          }
        },
        {
          title: "图片",
          width: 80,
          key: "Photo",
          render: (h, params) => {
            return h(
              "div",
              {
                attrs: {
                  style: "width: 40px;height: 40px;"
                }
              },
              [
                h("img", {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  attrs: {
                    src: this.getPhoto(params.row.Photo),
                    style: "width: 40px;height: 40px;border-radius: 2px;"
                  },
                  style: {}
                })
              ]
            );
          }
        }
      ],
      dataAll: [],
      loading: false
    };
  },
  methods: {
    getAll() {
      this.loading = true;
      this.$api.getAllStocks().then(res => {
        if (!res.error) {
          this.dataAll = res.Data;
          this.loading = false;
        } else {
          this.loading = false;
          this.$Message.error(res.error);
        }
      });
    },
    refresh() {
      this.getAll(this.pagedata);
    },
    exportData(type) {
      if (type === 1) {
        this.$refs.table2.exportCsv({
          filename: "原始数据",
          quoted: true
          //            columns: this.columns.filter((col, index) => index < 5),
          //            data: this.thisTableData,
        });
      } else if (type === 2) {
        this.$refs.table2.exportCsv({
          filename: "排序和过滤后的数据",
          original: false,
          quoted: true
        });
      }
    },
    getPhoto(data) {
      if (!data) {
        return "/static/img/default.jpg"
      } else {
        return V_ROOT + '/' + data
      }
    },
  },
  computed: {
    total() {
      return this.dataAll.length;
    }
  },
  mounted() {
    this.getAll();
  }
};
</script>

<style scoped>

</style>